<template>
  <div style="height: 100%">
    <el-row class="tac" style="height: 100%">
      <el-col :span="24">
        <!-- <h5 class="mb-2">Default colors</h5>  default-active="activeIndex" -->
        <el-menu
          class="el-menu-vertical-demo"
          :router="true"
          style="height: 100%"
          :collapse="isCollapse"
          :default-active="routeName"
          :default-openeds="['0']"
          :unique-opened="false"
          :collapse-transition="false"
          :mode="acMode"
          @click="activeMenu"
        >
          <div class="ac-login ac-login-text main-bg-color" v-if="!isCollapse">
            奥创管理平台
          </div>
          <div class="ac-login ac-login-img main-bg-color" v-if="isCollapse">
            奥创
          </div>
          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>控制中心</span>
            </template>
            <el-menu-item index="user">用户列表</el-menu-item>
            <el-menu-item index="medicine">药品管理 </el-menu-item>

            <el-sub-menu index="1.1">
              <template #title>药品管理</template>
              <el-menu-item index="medicine">药品中心 </el-menu-item>
            </el-sub-menu>
          </el-sub-menu> -->
          <!-- 没下拉的菜单 -->
          <!-- <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>财务管理</span>
          </el-menu-item> -->

          <!-- 菜单动态遍历 -->
          <head-sidebar-item :menuList="menuList" :base-path="basePath" />
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { defineComponent } from 'vue'
import { usePermissionStore } from '@/stores'
import path from 'path-browserify'

const route = useRoute()
const routeName = computed(() => `${String(route.name || route.path)}`)

console.log('routeName', routeName)
type Props = {
  isCollapse: boolean
}
// const props=withDefaults(defineProps<Props>(),{
//   isCollapse:false,
// })
const props = defineProps<Props>()

// let isCollapsexx = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('c=====')
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log('o=====')
}

const openMenu = (isCollapseTemp) => {
  // isCollapse.value=!isCollapseTemp;
  // console.log("o=====",props.isCollapse)
}
const activeMenu = (e) => {
  console.log('--------', e)
}

//菜单数据
let menuList = ref([])
let activeIndex = ref('/')
let acMode = ref('vertical')
let basePath = ''
const getMenuList = () => {
  usePermissionStore()
    .getMenuList()
    .then((res) => {
      menuList.value = res
    })
}

onMounted(() => {
  getMenuList()
})
/**
 * 解析路径
 *
 * @param routePath 路由路径 /user
 */
function resolvePath(routePath: string) {
  // if (isExternal(routePath)) {
  //   return routePath;
  // }
  // if (isExternal(props.basePath)) {
  //   return props.basePath;
  // }

  // 完整绝对路径 = 父级路径(/system) + 路由路径(/user)
  // const fullPath = path.resolve(props.basePath, routePath);
  return ''
}
</script>
